<template>
  <div class="home">
    <div class="titles" v-for="(item, index) in menu" :key="index">
      <img :src="item.icon" style="width: 40px;height: 40px;margin-right: 20px" alt="">
      <text>{{ item.name }}</text>
    </div>
    <img src="../assets/logo2.png" style="width: 115px;height: 40px;margin-left: 30px;" alt="">
  </div>
  <div class="top">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>年度协议管理</el-breadcrumb-item>
      <el-breadcrumb-item>二级商管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增二级商协议</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="text-align: left;font-weight: 600;font-size: 20px;">新增二级商协议</div>
  </div>
  <div class="contents">
    <div class="first">
      <div class="title">
        <div
          style="width: 20px;height: 20px;border-radius: 50%;background-color: #518EFD; color: #fff;line-height: 20px;">1
        </div>
        <div style="font-size: 20px; font-weight: 600;margin-left: 10px;">协议主体</div>
      </div>
      <el-form :model="form" label-width="120px">
        <el-form-item :required="true" label="协议客户">
          <el-button>选择客户</el-button>
          上海正则公司
        </el-form-item>
        <el-form-item label="协议状态">
          <el-select value-key="1" placeholder="请选择">
            <el-option label="正常" value="1" />
            <!-- <el-option label="Zone two" value="beijing" /> -->
          </el-select>
          <!-- <el-input  placeholder="请输入"/> -->
        </el-form-item>
        <el-form-item label="购进指标">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="金额" value="1" />
            <!-- <el-option label="Zone two" value="beijing" /> -->
          </el-select>
          <el-input placeholder="请输入" />
        </el-form-item>
        <el-form-item label="纯销指标">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="金额" value="1" />
            <!-- <el-option label="Zone two" value="beijing" /> -->
          </el-select>
          <el-input placeholder="请输入" />
        </el-form-item>
        <el-form-item label="销售区域">
          <el-select v-model="form.region" placeholder="选择区域">
            <el-option label="全国" value="1" />
            <!-- <el-option label="Zone two" value="beijing" /> -->
          </el-select>
          <el-tag class="mx-1" closable type="success">
            全国区域
          </el-tag>
        </el-form-item>
        <el-form-item label="签订时间">
          <el-date-picker v-model="value1" type="datetime" placeholder="选择时间" />
        </el-form-item>
        <el-form-item label="指定渠道">
          <el-select v-model="form.region" placeholder="指定渠道">
            <el-option label="全国" value="1" />
            <!-- <el-option label="Zone two" value="beijing" /> -->
          </el-select>
          <el-tag class="mx-1" closable type="success">
            请选择渠道
          </el-tag>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary">Create</el-button>
          <el-button>Cancel</el-button>
        </el-form-item> -->
      </el-form>
      <el-table :data="tableData" width="800">
        <el-table-column prop="id" label="编号" width="180" />
        <el-table-column prop="name" label="名称" width="500" />
        <el-table-column prop="address" label="地址" />
      </el-table>
    </div>
    <div class="first">
      <div class="title">
        <div
          style="width: 20px;height: 20px;border-radius: 50%;background-color: #518EFD; color: #fff;line-height: 20px;">2
        </div>
        <div style="font-size: 20px; font-weight: 600;margin-left: 10px;">产品政策</div>
      </div>
      <div class="sss">
        <el-button type="primary" style="margin-right: 10px;">添加产品</el-button>
        <div style="margin-right: 10px;">购进总指标（万元）:￥152.36</div>
        <div style="margin-right: 10px;">指标按季度分解（万元）:【Q1】￥12.5，【Q2】￥12.5，【Q3】￥12.5，【Q4】￥12.5</div>
        <div>纯销总指标（万元）:￥152.36</div>
      </div>
      <div class="chanpin">
        <div class="t3">
          <div>产品：</div>
          <el-button style="margin: 10px 0;">选择产品</el-button>
          <text style="padding-left: 10px;">没心玩</text>
        </div>
        <div class="t3">
          <div>协议有效期：</div>
          <el-date-picker v-model="value2" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
            :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
        </div>

      </div>
      <el-form class="tt" :model="form" label-width="120px">
        <el-form-item class="test" :required="true" label-width="180px" label="协议客户">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="test" :required="true" label-width="120px" label="协议客户">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="test" :required="true" label-width="200px" label="协议客户">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="test" :required="true" label="协议客户">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="test" :required="true" label="协议客户">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="test" :required="true" label="协议客户">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="test" :required="true" label="协议客户">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="test" :required="true" label="协议客户">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="test" :required="true" label="协议客户">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="test" label="协议状态">
          <el-select value-key="1" placeholder="请选择">
            <el-option label="正常" value="1" />
            <!-- <el-option label="Zone two" value="beijing" /> -->
          </el-select>
          <!-- <el-input  placeholder="请输入"/> -->
        </el-form-item>
        <el-form-item class="test" label="购进指标">
          <el-input placeholder="请输入" />
        </el-form-item>
        <el-form-item class="test" label="纯销指标">
          <el-input placeholder="请输入" />
        </el-form-item>
        <el-form-item class="test" label="销售区域">
          <el-tag class="mx-1" closable type="success">
            全国区域
          </el-tag>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary">Create</el-button>
          <el-button>Cancel</el-button>
        </el-form-item> -->
      </el-form>
    </div>
    <div class="first">

      <div class="title">
        <div
          style="width: 20px;height: 20px;border-radius: 50%;background-color: #518EFD; color: #fff;line-height: 20px;">3
        </div>
        <div style="font-size: 20px; font-weight: 600;margin-left: 10px;">补充协议</div>
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="补充协议1" name="first">
          <el-input
            :rows="5"
            type="textarea"
            placeholder="请输入补充协议"
          />
        </el-tab-pane>
        <el-tab-pane label="补充协议2" name="second">Config</el-tab-pane>
        <el-tab-pane label="补充协议3" name="third">Role</el-tab-pane>
        <!-- <el-tab-pane label="Task" name="fourth">Task</el-tab-pane> -->
      </el-tabs>
    </div>
    <el-button type="primary">保存</el-button>
  </div>
</template>

<script lang="ts" setup name='HomeView'>
import { reactive, ref } from 'vue'
const value1 = ref('')
const value2 = ref('')
const activeName = ref('first')
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})
const menu = reactive([
  {
    icon: require('@/assets/idx.png'),
    name: '首页'
  },
  {
    icon: require('@/assets/data.png'),
    name: '主数据'
  },
  {
    icon: require('@/assets/xiaqu.png'),
    name: '辖区管理'
  }
])
const tableData = reactive([
  {
    id: 'bj01',
    name: 'suibian',
    address: '上海'
  },
  {
    id: 'bj01',
    name: 'suibian',
    address: '上海'
  },
  {
    id: 'bj01',
    name: 'suibian',
    address: '上海'
  },
  {
    id: 'bj01',
    name: 'suibian',
    address: '上海'
  }
])
</script>

<style scoped>
.chanpin {
  background-color: #fff;
  height: 60px;
  border-bottom: 1px solid #f0f0f0;
  padding-left: 30px;
  display: flex;
  align-items: center;
}

.t3 {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.sss {
  height: 40px;
  padding-left: 30px;
  display: flex;
  align-items: center;
}

.home {
  overflow-y: scroll;
  display: flex;
  align-items: center;
  background-color: #2A3038;
  padding-left: 10px;
}

.titles {
  width: 130px;
  height: 80px;
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
  color: #F9F9F9;
}

.top {
  height: 85px;
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  /* align-items: center; */
  justify-content: space-around;
  background-color: #fff;
  border-bottom: 1px solid #9e9e9e;
}

.first {
  background-color: #f0f0f0;
}

.title {
  height: 50px;
  line-height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* background-color: #F0F0F0; */

}

.el-form-item {
  width: 800px;
}

.el-form {
  display: flex;
  background-color: #fff;
  padding-top: 10px;
  flex-wrap: wrap;
}

.el-select {
  width: 100px;
}

.el-input {
  width: 150px;
}

.el-table__body-wrapper,
.el-table__header-wrapper {
  width: 1400px;
}

.el-table {
  /* box-sizing: content-box; */
  padding-left: 100px;
  padding-right: 200px;
  overflow: hidden;
}

.el-table__body {
  width: 1500px !important;
  overflow: hidden;
}

.tt {
  width: calc(100% - 204px);
  padding: 0 20px;
}

.test {
  width: 200px;
  margin-left: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.test input {
  width: 100%;
}
.contents{
  height: 1500px;
  overflow-y: scroll;
}
.el-tabs{
  width: calc(100%-264px);
  padding: 30px;
  background-color: #fff;
}
.el-textarea{
  width: 1500px;
  margin-left: -200px;
}
</style>
